<template>
    <div class="bi-radio " :class="dir=='row'?'radio-row':''">
        <label class="form-check" v-for="(item,index) in optionsList" :key="index">
            <input type="radio" :disabled="disabled || item.disabled" class="form-check-input" :id="id" :name='id' :value="item.value" v-model="value" />
            <bi-icon :data="item.icon" :style="iconStyle" v-if="item.icon" ></bi-icon>
            <span class="form-check-label"  :style="labelStyle">{{item.label}}</span>
        </label>
    </div>
</template> 

<script>
import FieldMixin from '../fieldMixin.js';
import OptionMixin from '../optionMixin.js';
export default {
    mixins:[FieldMixin,OptionMixin],
    props:{
        
        dir:{
            type:String,
            default:'row'
        },
        labelStyle:{
            type:Object,
            default:{}
        }
    },
}
</script>


<style>
.bi-radio{
    padding: var(--bs-field-padding);
}
.bi-radio.radio-row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.bi-radio.radio-row .form-check{
    margin-right: 20px;
}
</style>